<template>
    <h1>房间价格 --- {{ price }}</h1>
    <button @click="price *= 2">涨价</button>

    <button @click="num++">num --- {{ num }}</button>

    <hr />
    <h1>计算属性</h1>
    <h4>VIP 价格: {{ cVIP }}</h4>
    <h4>SVIP 价格: {{ cSVIP }}</h4>

    <hr />
    <h1>侦听器</h1>
    <h4>VIP 价格: {{ wVIP }}</h4>
    <h4>SVIP 价格: {{ wSVIP }}</h4>
</template>

<script>
/**
 *  侦听器和计算属性的区别
 *
 *      侦听器
 *          1. 页面打开的时候不回立即执行, 除非添加配置项
 *          2. 没有缓存性
 *          3. 内部可以书写 异步代码
 *          4. 内部不需要书写 return
 *          5. 一个值(监听的值)的变化可能会导致 多个值发生变化  一对多
 *
 *      计算属性的
 *          1. 只要使用了计算属性, 那么页面一打开计算属性就会立即执行一次
 *          2. 具有缓存性
 *          3. 内部不能书写异步代码
 *          4. 内部必须书写 return
 *          5. 多个值(计算属性内书写的所有响应式数据)的变化, 可能会导致 一个值 发生变化   多对一
 */

export default {
    data() {
        return {
            price: 1000,
            wVIP: 0,
            wSVIP: 0,
            num: 0
        };
    },
    computed: {
        cVIP() {
            return this.price * 0.8;
            // setTimeout(() => {
            //     return this.price * 0.8;
            // });
        },
        cSVIP() {
            // 当前的计算属性, 会在 num 或者 price 任意一个 响应式状态发生变化的时候 重新执行
            console.log(this.num)

            return this.price * 0.5;
            // setTimeout(() => {
            //     return this.price * 0.5;
            // }, 300);
        },
    },
    watch: {
        price() {
            // setTimeout(() => {}, 300);
            this.wVIP = this.price * 0.8;
            this.wSVIP = this.price * 0.5;
        },
    },
};
</script>

<style></style>
